<template>
  <!-- 网格视图模式 -->
  <div v-if="viewMode === 'grid'" class="grid-view">
    <FileCard
      v-for="file in filteredFiles"
      :key="file.id || file.name"
      :file="file"
      :can-delete="canDelete"
      :is-selected="selectedFile && selectedFile.name === file.name && selectedFile.type === file.type"
      @click="$emit('file-click', file)"
      @dblclick="$emit('file-dbl-click', file)"
      @preview="$emit('preview', file)"
      @download="$emit('download', file)"
      @open="$emit('open', file)"
      @info="$emit('info', file)"
      @delete="$emit('delete', file)"
    />
  </div>
  
  <!-- 列表视图模式 -->
  <div v-else class="list-view">
    <FileList
      :files="filteredFiles"
      :loading="loading"
      :can-delete="canDelete"
      :selected-file="selectedFile"
      @row-click="(file) => $emit('file-click', file)"
      @preview="(file) => $emit('preview', file)"
      @download="(file) => $emit('download', file)"
      @open="(file) => $emit('open', file)"
      @info="(file) => $emit('info', file)"
      @delete="(file) => $emit('delete', file)"
    />
  </div>
</template>

<script setup>
import FileCard from '../common/FileCard.vue';
import FileList from '../common/FileList.vue';

defineProps({
  viewMode: {
    type: String,
    default: 'grid'
  },
  filteredFiles: {
    type: Array,
    default: () => []
  },
  selectedFile: {
    type: Object,
    default: null
  },
  canDelete: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
});

defineEmits([
  'file-click',
  'file-dbl-click',
  'preview',
  'download',
  'open',
  'info',
  'delete'
]);
</script>

<style scoped>
/* 网格视图样式 */
.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 8px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .grid-view {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
</style> 